<template>
  <div class>
    <naviHeader></naviHeader>
    <div>
      <div class="select-container">
        <input type="text" v-model="phone" placeholder="请输入电话">
        <div v-on:click="selectBtn">搜索</div>
      </div>

      <div class="content-container">
        <div class="header">
          <div
            class="tab-item"
            v-bind:class="{'select-item': selectIndex === 0}"
            v-on:click="selectIndex = 0"
          >直接同学</div>
          <div
            class="tab-item"
            v-bind:class="{'select-item': selectIndex === 1}"
            v-on:click="selectIndex = 1"
          >间接同学</div>
        </div>

        <div class="content" v-show="list.length === 0">暂无相关人员</div>

        <div class="container">
          <div class="item" v-for="(item, index) in list" :key="index">
            <div>
              <img class="image" :src="item.avatarUrl" alt>
            </div>
            <div>
              <div>{{item.alias}}</div>
              <!-- <div>{{}}</div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";
import { getClassmates, getIndirectClassmates } from "../../service/getData";
import { imgBaseUrl } from "../../config/env";

export default {
  data() {
    return {
      imgBaseUrl: imgBaseUrl,
      list: [],
      indirectClassmates: [],
      selectIndex: 0,
      classmates: [],
      selectList: [],
      // name: "",
      phone: ""
    };
  },

  watch: {
    selectIndex: function() {
      switch (this.selectIndex) {
        case 0:
          this.list = this.classmates;
          break;
        case 1:
          this.list = this.indirectClassmates;
          break;
        case 2:
          this.list = this.expendRecord;
          break;
      }
    }
  },
  mounted() {
    this.init();
  },
  components: {
    naviHeader
  },
  methods: {
    init: function() {
      getClassmates(this.$store.userToken, 1).then(res => {
        this.classmates = res.content;
        this.list = res.content;
      });

      getIndirectClassmates(this.$store.userToken, 1).then(res => {
        this.indirectClassmates = res.content;
      });
    },
    selectBtn: function() {
      if (this.selectIndex === 0) {
        getClassmates(this.$store.userToken, 1, this.phone).then(res => {
          this.classmates = res.content;
          this.list = res.content;
        });
      } else if (this.selectIndex === 1) {
        getIndirectClassmates(this.$store.userToken, 1, this.phone).then(res => {
          this.indirectClassmates = res.content;
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.select-container {
  @include fj(space-around);
  align-items: center;
  height: 2rem;
  line-height: 2rem;
  background: #fff;
  border-bottom: 2px solid #f1f1f1;
  
  input {
    width: 6.5rem;
    height: 1rem;
    line-height: 1rem;
    border: 2px solid #f1f1f1;
    padding: 0.2rem;
    margin-left: 0.3rem;
    border-radius: 10px;
  }

  .selectBtn{
    width: 2rem;
    text-align: center;
  }
}

.content-container {
  .header {
    @include fj(space-around);
    background: #fff;
    // border-bottom: 2px solid #f1f1f1;

    .tab-item {
      width: 2rem;
      height: 1rem;
      line-height: 1rem;
      text-align: center;
    }

    .select-item {
      border-bottom: 2px solid #16e08f;
    }
  }

  .content {
    @include sc(0.4rem, #000);
    @include fj(center);
    align-items: center;
    background: #f1f1f1;
    height: 4rem;
    width: 100%;
  }
  .container {
    .item {
      @include fj(flex-start);
      height: 1.5rem;
      align-items: center;
      background: #fff;
      border-top: 2px solid #f1f1f1;

      .image {
        width: 1rem;
        height: 1rem;
        border-radius: 25px;
        margin: 0 0.1rem 0 0.2rem;
      }
    }
  }
}
</style>
